<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>热情红色留言墙</title>
  <style>
    body { font-family: '微软雅黑'; background: #fff0f0; margin: 0; padding: 30px; }
    h1 { text-align: center; color: #d32f2f; }
    .input-box { text-align: center; margin: 20px auto; }
    textarea { width: 80%; padding: 10px; border: 2px solid #d32f2f; border-radius: 10px; }
    button { margin-top: 10px; background: #d32f2f; color: #fff; border: none; padding: 10px 30px; border-radius: 8px; font-weight: bold; }
    .board { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px; margin-top: 20px; }
    .message { background: #ffebee; padding: 15px; border: 1px solid #f44336; border-radius: 10px; position: relative; }
    .message button { position: absolute; top: 5px; right: 5px; background: #f44336; border: none; color: #fff; border-radius: 5px; padding: 2px 6px; }
  </style>
</head>
<body>
  <h1>好友留言板</h1>
  <div class="input-box">
    <textarea id="messageInput" rows="3" placeholder="写下留言..."></textarea><br>
    <button onclick="addMessage()">发布</button>
  </div>
  <div id="board" class="board"></div>
<script>
  const key = "redBoard";
  let msgs = JSON.parse(localStorage.getItem(key)) || [];
  function show() {
    const b = document.getElementById("board");
    b.innerHTML = "";
    msgs.forEach((msg,i)=>{
      let div = document.createElement("div");
      div.className="message";
      div.innerHTML = `${msg} <button onclick="del(${i})">X</button>`;
      b.appendChild(div);
    });
  }
  function addMessage() {
    const input = document.getElementById("messageInput");
    if (input.value.trim()) {
      msgs.push(input.value.trim());
      localStorage.setItem(key, JSON.stringify(msgs));
      input.value="";
      show();
    }
  }
  function del(i){ msgs.splice(i,1); localStorage.setItem(key, JSON.stringify(msgs)); show();}
  show();
</script>
</body>
</html>
